<template>
  <dashboard-chart :title="title" :loading="loading" :empty="empty" :option="option"></dashboard-chart>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import dashboardChart from '../lib/dashboard-chart.vue';
import { COLOR, LEGEND, XAXIS, GRID, TOOLTIP, SERIES_LINE } from '../lib/echart-default';

export default defineComponent({
  name: 'Chart1',
  components: { dashboardChart },
  setup(props, ctx) {
    const title = ref('证书上传系统趋势图');
    const loading = ref(false);
    const empty = ref(false);
    const option = reactive({
      color: COLOR,
      toolbox: {
        show: true,
        feature: {
          saveAsImage: { show: true },
        },
      },
      tooltip: {
		show: true,
        trigger: 'item',
      },
      yAxis: {
        axisLabel: {
          formatter: (value) => `${value}`,
        },
      },
      grid: GRID,
      xAxis: {
        data: ['08-25', '08-26', '08-27', '08-28', '08-29', '08-30', '08-31'],
        ...XAXIS,
      },
      series: [
        {
          data: [12, 14, 16, 18, 25, 30, 28],
          ...SERIES_LINE,
        },
      ],
    });
    return {
      title,
      loading,
      empty,
      option,
    };
  },
});
</script>
